import { Component } from '@/decorators';
import { Vue } from 'vue-class-component';
import { Form, Field, Button, Toast } from 'vant';
import request from '@/utils/request';

@Component({
  name: 'Login',
  render() {
    return (
      <div class="p-4">
        <h1 class="text-2xl font-bold mb-6 text-center">登录</h1>
        <Form onSubmit={this.onSubmit}>
          <Field
            v-model={this.form.username}
            name="username"
            label="用户名"
            placeholder="请输入用户名"
            rules={[{ required: true, message: '请填写用户名' }]}
          />
          <Field
            v-model={this.form.password}
            type="password"
            name="password"
            label="密码"
            placeholder="请输入密码"
            rules={[{ required: true, message: '请填写密码' }]}
          />
          <div class="mt-8">
            <Button round block type="primary" native-type="submit">
              登录
            </Button>
            <div class="text-center mt-4">
              <router-link to="/register" class="text-blue-500">
                还没有账号？去注册
              </router-link>
            </div>
          </div>
        </Form>
      </div>
    );
  }
})
export default class Login extends Vue {
  private form = {
    username: '',
    password: ''
  };

  @Debounce(300)
  private async onSubmit() {
    try {
      const { token } = await request.post('/login', this.form);
      localStorage.setItem('token', token);
      Toast.success('登录成功');
      this.$router.push(this.$route.query.redirect?.toString() || '/');
    } catch (error) {
      // 错误已在拦截器中处理
    }
  }
} 